<template>
  <div class="login-register">
    <img class="setting" src="../assets/setting1.png" alt="Background Image">
    <div class="logreg">
      <component 
        :is="currentForm"
        @switch-to-register="switchToRegister"
        @switch-to-login="switchToLogin"
        @switch-to-forget="switchToForgetPsw"
      ></component>
    </div>
  </div>
</template>

<script>
import Login from '../components/Login.vue'
import Register from '../components/Register.vue'
import ForgetPsw from '@/components/ForgetPsw.vue';

export default {
  name: 'LoginRegisterView',
  components: {
    Login,
    Register,
    ForgetPsw,
  },
  data() {
    return {
      currentForm: 'Login' // 初始显示登录组件
    }
  },
  methods: {
    switchToRegister() {
      this.currentForm = 'Register'
    },
    switchToLogin() {
      this.currentForm = 'Login'
    },
    switchToForgetPsw() {
      this.currentForm = 'ForgetPsw'
    }
  }
}
</script>

<style scoped>
.login-register {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
}

.setting {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.logreg {
  position: absolute;
  top: 55%; /* 保留原来的位置 */
  left: 48%;
  transform: translate(-50%, -50%); /* 居中显示 */
  width: 100%;
  max-width: 400px;
  background: #fafafa;
  border-radius: 10px;
  
  box-sizing: border-box;
}

/* 媒体查询适配不同屏幕尺寸 */
@media (max-width: 768px) {
  .logreg {
    top: 0; /* 在小屏幕上将top设置为0 */
    left: 0;
    width: 100%;
    height: 100vh; /* 全屏高度 */
    transform: none; /* 去掉居中的transform */
    padding: 20px;
    box-sizing: border-box;
  }
}

@media (max-width: 480px) {
  .logreg {
    padding: 15px;
  }
}
</style>
